<template>
  <div>
    <div id="dplayer" ref="player" class="dplayer"></div>
  </div>
</template>

<script>
import Hls from 'hls.js'
import DPlayer from 'dplayer'

export default {
  data () {
    return {
      dp: null,
      video: {}
    }
  },
  methods: {
    loadVideo (videoInfo) {
      this.dp = new DPlayer({
        element: this.$refs.player,
        video: {
          //  pic: videoInfo.img, // 封面
          url: videoInfo.video,
          type: 'customHls',
          customType: {
            customHls: function (video, player) {
              const hls = new Hls()
              hls.loadSource(video.src)
              hls.attachMedia(video)
            }
          }
        }
      })
    }
  },
  mounted () {
    this.video = {
      //封面
      //img: "https://cn.bing.com/th?id=OHR.MeotoIwa_ZH-CN3126370410_1920x1080.jpg&rf=LaDigue_1920x1080.jpg",
      video: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8',
    }
    this.loadVideo(this.video)
  }
}
</script>